<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <template #left>
      <l-panel style="padding-right: 0">
        <template #title>
          {{ $t("表单分类") }}
        </template>
        <el-tree
          v-loading="treeLoading"
          :data="treeData"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>

    <l-layout :bottom="300">
      <l-panel style="padding-left: 0; padding-bottom: 0">
        <template #toolLeft> </template>
        <template #toolRight>
          <l-tool-btns @click="handleAdd()">
            <el-button-group>
              <el-button size="mini" icon="el-icon-check" @click="handleShenhe()">审核</el-button>
            </el-button-group>
          </l-tool-btns>
        </template>
        <l-table
          ref="mainTable"
          :loading="tableLoading"
          :columns="columns"
          :dataSource="tableData"
          :isPage="true"
          :pageTotal="tableTotal"
          :tablePage.sync="tableCurrentPage"
          @loadPageData="turnTablePage"
          @rowClick="handleRowClick"
        >
          <template v-slot:f_radio="scope">
            {{ lr_formatValue(scope.row.f_radio, f_radioOptions) }}
          </template>
          <template v-slot:f_checkbox="scope">
            {{ lr_formatValue(scope.row.f_checkbox, f_checkboxOptions) }}
          </template>
          <template v-slot:f_select="scope">
            {{ lr_formatValue(scope.row.f_select, f_selectOptions) }}
          </template>
          <template v-slot:f_select2="scope">
            {{ lr_formatValue(scope.row.f_select2, f_select2Options) }}
          </template>
          <template v-slot:f_treeSelect="scope">
            {{ lr_formatValue(scope.row.f_treeSelect, f_treeSelectOptions) }}
          </template>
          <template v-slot:f_time="scope">
            {{ lr_dateFormat(scope.row.f_time, "HH:mm:ss") }}
          </template>
          <template v-slot:f_time2="scope">
            {{ lr_displayTimerange(scope.row.f_time2, "HH:mm:ss") }}
          </template>
          <template v-slot:f_date="scope">
            {{ lr_dateFormat(scope.row.f_date, "yyyy-MM-dd") }}
          </template>
          <template v-slot:f_datev="scope">
            {{ lr_displayTimerange(scope.row.f_datev, "yyyy-MM-dd") }}
          </template>
          <template v-slot:f_file="scope">
            <el-button
              v-if="!$validatenull(scope.row.f_file)"
              @click.stop="lr_openFilePreview(scope.row.f_file)"
              type="text"
              >{{ $t("文件查看") }}</el-button
            ><span v-else></span>
          </template>
          <template v-slot:f_img="scope">
            <el-image
              v-if="!$validatenull(scope.row.f_img)"
              :src="`${apiUrl}file/${scope.row.f_img}`"
              fit="contain"
              lazy
            ></el-image
            ><span v-else></span>
          </template>
          <template v-slot:f_company="scope">
            {{ lr_formatValue(scope.row.f_company, lr_companyList) }}
          </template>
          <template v-slot:f_department="scope">
            {{ lr_departmentName(scope.row.f_department) }}
          </template>
          <template v-slot:f_user="scope">
            {{ lr_userName(scope.row.f_user) }}
          </template>
          <template v-slot:f_ccompany="scope">
            {{ lr_formatValue(scope.row.f_ccompany, lr_companyList) }}
          </template>
          <template v-slot:f_cdepartment="scope">
            {{ lr_departmentName(scope.row.f_cdepartment) }}
          </template>
          <template v-slot:f_cuser="scope">
            {{ lr_userName(scope.row.f_cuser) }}
          </template>
          <template v-slot:f_muser="scope">
            {{ lr_userName(scope.row.f_muser) }}
          </template>
          <template v-slot:f_cdate="scope">
            {{ lr_dateFormat(scope.row.f_cdate) }}
          </template>
          <template v-slot:f_mdate="scope">
            {{ lr_dateFormat(scope.row.f_mdate) }}
          </template>
          <template v-slot:f_icon="scope">
            <i :class="scope.row.f_icon"></i>
          </template>
          <template v-slot:f_rate="scope">
            <el-rate
              disabled
              :max="5"
              :lowThreshold="2"
              :highThreshold="4"
              voidColor="#C6D1DE"
              disabledVoidColor="#EFF2F7"
              textColor="#1F2D3D"
              voidIconClass="el-icon-star-off"
              disabledVoidIconClass="el-icon-star-on"
              :allowHalf="false"
              :showText="false"
              :showScore="false"
              :colors="['#F7BA2A', '#F7BA2A', '#F7BA2A']"
              :iconClasses="['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on']"
              :texts="['极差', '失望', '一般', '满意', '惊喜']"
              v-model="scope.row.f_rate"
            >
            </el-rate>
          </template>
          <template v-slot:f_swtich="scope">
            <el-switch disabled :activeValue="true" :inactiveValue="false" v-model="scope.row.f_swtich"> </el-switch>
          </template>
          <template v-slot:f_swtich2="scope">
            <el-slider disabled v-model="scope.row.f_swtich2"> </el-slider>
          </template>
          <template v-slot:f_color="scope">
            <el-color-picker v-model="scope.row.f_color" size="mini"></el-color-picker>
          </template>
          <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
        </l-table>
      </l-panel>
      <template #bottom>
        <!--子表部分-->
        <l-panel style="padding-left: 0; padding-top: 0">
          <template #toolRight>
            <l-tool-btns :hasRefresh="false" @click="handleCAdd()"> </l-tool-btns>
          </template>
          <l-table ref="childTable" :loading="ctableLoading" :columns="ccolumns" :dataSource="ctableData">
            <l-table-btns :btns="ctableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
          </l-table>
        </l-panel>
      </template>
    </l-layout>
  </l-layout>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      // 左侧树形数据参数
      treeLoading: false,
      treeCategory: "",
      classifysVisible: false,

      // 查询参数
      queryData: {
        f_text: "",
        f_textarea: "",
        f_edit: "",
        f_radio: "",
        f_checkbox: "",
        f_select: "",
        f_select2: "",
        f_treeSelect: "",
        f_time: "",
        f_date: "",
        f_company: "",
        f_department: "",
        f_icon: "",
        f_color: "",
        f_code: "",
        f_user: "",
        f_ccompany: "",
        f_cdepartment: "",
        f_cuser: "",
        f_muser: "",
        f_mdate: "",
        f_cdate: "",
        f_swtich: "",
      },

      queryItems: [
        { label: "下", prop: "f_text" },
        { label: "多行文本", prop: "f_textarea" },
        { label: "编辑器", prop: "f_edit" },
        { label: "单选框组", prop: "f_radio" },
        { label: "多选框组", prop: "f_checkbox" },
        { label: "下拉选择", prop: "f_select" },
        { label: "下拉多选", prop: "f_select2" },
        { label: "树形选择", prop: "f_treeSelect" },
        { label: "时间选择", prop: "f_time" },
        { label: "日期选择", prop: "f_date", span: 24 },
        { label: "公司选择", prop: "f_company" },
        { label: "部门选择", prop: "f_department" },
        { label: "图标", prop: "f_icon" },
        { label: "颜色选择", prop: "f_color" },
        { label: "单据编码", prop: "f_code" },
        { label: "人员选择", prop: "f_user" },
        { label: "所属公司", prop: "f_ccompany" },
        { label: "所属部门", prop: "f_cdepartment" },
        { label: "创建人员", prop: "f_cuser" },
        { label: "修改人员", prop: "f_muser" },
        { label: "修改时间", prop: "f_mdate", span: 24 },
        { label: "创建时间", prop: "f_cdate", span: 24 },
        { label: "开关", prop: "f_swtich" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "单行文本", prop: "f_text", width: 120, align: "left" },
        { label: "编辑器", prop: "f_edit", width: 120, align: "left" },
        { label: "计数器", prop: "f_Num", width: 120, align: "left" },
        { label: "单选框组", prop: "f_radio", width: 120, align: "left" },
        { label: "多行文本", prop: "f_textarea", width: 120, align: "left" },
        { label: "多选框组", prop: "f_checkbox", width: 120, align: "left" },
        { label: "下拉选择", prop: "f_select", width: 120, align: "left" },
        { label: "下拉多选", prop: "f_select2", width: 120, align: "left" },
        { label: "树形选择", prop: "f_treeSelect", width: 120, align: "left" },
        { label: "时间选择", prop: "f_time", width: 120, align: "left" },
        { label: "时间范围", prop: "f_time2", width: 120, align: "left" },
        { label: "日期选择", prop: "f_date", width: 120, align: "left" },
        { label: "日期范围", prop: "f_datev", width: 120, align: "left" },
        { label: "文件上传", prop: "f_file", width: 120, align: "left" },
        { label: "图片上传", prop: "f_img", width: 120, align: "left" },
        { label: "公司选择", prop: "f_company", width: 120, align: "left" },
        { label: "部门选择", prop: "f_department", width: 120, align: "left" },
        { label: "人员选择", prop: "f_user", width: 120, align: "left" },
        { label: "所属公司", prop: "f_ccompany", width: 120, align: "left" },
        { label: "所属部门", prop: "f_cdepartment", width: 120, align: "left" },
        { label: "创建人员", prop: "f_cuser", width: 120, align: "left" },
        { label: "修改人员", prop: "f_muser", width: 120, align: "left" },
        { label: "创建时间", prop: "f_cdate", width: 120, align: "left" },
        { label: "修改时间", prop: "f_mdate", width: 120, align: "left" },
        { label: "单据编码", prop: "f_code", width: 120, align: "left" },
        { label: "图标", prop: "f_icon", width: 120, align: "left" },
        { label: "评分", prop: "f_rate", width: 120, align: "left" },
        { label: "开关", prop: "f_swtich", width: 120, align: "left" },
        { label: "滑块", prop: "f_swtich2", width: 120, align: "left" },
        { label: "颜色选择", prop: "f_color", width: 120, align: "left" },
      ],
      tableBtns: [
        { prop: "Edit", label: "编辑" },
        { prop: "Delete", label: "删除" },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,

      // 子表代码
      ctableLoading: false,
      ctableData: [],
      ctableBtns: [
        { prop: "CEdit", label: "编辑" },
        { prop: "CDelete", label: "删除" },
      ],
      ccolumns: [
        { label: "树形选择", prop: "f_treeSelect", minWidth: 120, align: "left" },
        { label: "时间选择", prop: "f_time", width: 120, align: "left" },
        { label: "时间范围", prop: "f_time2", width: 120, align: "left" },
        { label: "日期选择", prop: "f_date", width: 120, align: "left" },
        { label: "日期范围", prop: "f_datev", width: 120, align: "left" },
      ],
    };
  },
  computed: {
    // 左侧树形数据参数
    treeData() {
      return this.lr_dataItemTree(this.lr_dataItem["DbVersion"]);
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    handleNodeClick(node) {
      this.treeCategory = node.value;
      this.loadTableData(true);
    },

    handleSearch() {
      this.loadTableData(true);
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);
      if (!this.$validatenull(queryData.f_time)) {
        queryData.f_time_end = queryData.f_time.split(" - ")[1];
        queryData.f_time = queryData.f_time.split(" - ")[0];
      }
      if (!this.$validatenull(queryData.f_date)) {
        queryData.f_date_end = queryData.f_date.split(" - ")[1];
        queryData.f_date = queryData.f_date.split(" - ")[0];
      }
      if (!this.$validatenull(queryData.f_mdate)) {
        queryData.f_mdate_end = queryData.f_mdate.split(" - ")[1];
        queryData.f_mdate = queryData.f_mdate.split(" - ")[0];
      }
      if (!this.$validatenull(queryData.f_cdate)) {
        queryData.f_cdate_end = queryData.f_cdate.split(" - ")[1];
        queryData.f_cdate = queryData.f_cdate.split(" - ")[0];
      }

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      queryData.f_select = this.treeCategory;
      this.tableData = [];
      this.tableLoading = false;
    },

    handleAdd() {
      this.formEdit = false;
      this.handleShowForm();
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm();
    },
    handleDelete($index) {
      this.$confirm(this.$t("此操作将永久删除该数据, 是否继续?"), this.$t("提示"), {
        confirmButtonText: this.$t("确定"),
        cancelButtonText: this.$t("取消"),
        type: "warning",
      })
        .then(() => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          this.$message({
            type: "success",
            message: this.$t("删除成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消删除!"),
          });
        });
    },
    handleshenhe() {
      //console.log($index,row)// 在此处添加按钮逻辑
    },

    async handleSave(showLoading, hideLoading) {
      if (await this.$refs.form.validateForm()) {
        showLoading();
        //const postData = this.$refs.form.getForm()
        let res = "";
        if (this.formEdit) {
          // 编辑
          //res = await this.$awaitWraper(updateTest(this.formEditRow.f_Id,postData))
        } else {
          // 新增
          //res = await this.$awaitWraper(addTest(postData))
        }
        if (res) {
          this.$message({
            type: "success",
            message: this.$t("保存成功!"),
          });
          this.loadTableData();
          this.formVisible = false;
        }

        hideLoading();
      }
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("加载数据中...");
        /*let data = await this.$awaitWraper(getTest(this.formEditRow.f_Id))
                    if(data){
                        this.$refs.form.setForm(data)
                    }*/

        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },

    handleShenhe() {
      this.$message("这是一条消息提示");
    },

    // 主表点击事件
    handleRowClick(row) {
      console.log(row); //主表点击行数据，根据这个加载子表数据就好了
      this.ctableData = [{ f_treeSelect: "树形选择", f_time: "", f_date: 120, f_datev: "left" }];
    },
    // 子表部分代码
    handleCAdd() {},
    handleCEdit() {},
    handleCDelete() {},
  },
};
</script>
